<template>
    <div class="page">
        <v-header/>
        <div class="body">
            <div class="info-card">
                <el-row type="flex" justify="start">
                    <el-col span="3">
                        <img class="logo"
                             :src="game_info.icon">
                    </el-col>
                    <el-col>
                        <el-row align="bottom">
                            <el-col>
                                <span class="cn_name">{{game_info.game_name_cn}}</span>
                                <span class="name">{{game_info.game_name_en}}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <div class="desc" v-html="game_info.description"></div>
                        </el-row>
                    </el-col>
                    <el-col>
                        <el-carousel indicator-position="outside" height="200px">
                            <el-carousel-item v-for="item in game_info.pics" :key="item">
                                <el-image
                                        :src="item"
                                        fit="cover"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>
            </div>

            <el-tabs
                    v-model="activeName"
                    @tab-click="handleClick"
                    :stretch="false"
                    style="color: white; height: 300px; width: 100%;caret-color: transparent;">
                <el-tab-pane label="游戏行情" name="first">

                </el-tab-pane>
                <el-tab-pane label="热度(媒体)" name="second">
                    <el-table
                            :data="game_info.socialLinks"
                            style="width: 100%">
                        <el-table-column
                                prop="title"
                                label="媒体"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="媒体链接"
                                width="180">
                            <template slot-scope="scope">
                                <a :href="scope.row.url" target="_blank">点击访问</a>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="项目背景" name="third">{{game_info.Info}}</el-tab-pane>
                <el-tab-pane label="资讯" name="fourth"
                >游戏历史更新动态(活动或者迭代的信息)
                </el-tab-pane
                >
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import vHeader from "../components/Header.vue";
    import {gameDetail} from "../api/data.js"

    export default {
        components: {
            vHeader,
        },
        data() {
            return {
                game_info: {},
                chain_info: {},
                activeName: 'first',
                tableData: []
            }
        },
        created() {
            this.id = this.$route.query.id
            this.getGameDetail(this.id);
        },
        methods: {
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                console.log(rowIndex)
                if (rowIndex === 0) {
                    return 'background-color: #F0F;font-weight: 500;'
                }
            },
            tableRowClassName({row, rowIndex}) {
                return "table-row"
            },
            getGameDetail(id) {
                gameDetail({game_id: id}).then((res) => {
                    this.game_info = res.data.game_info
                    this.chain_info = res.data.chain_info
                })
            },
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .page {
        height: 100%;
        background: #f4f6fa;
    }

    .body {
        width: 1280px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        min-height: calc(100vh - 244px);
        margin: 0 auto 156px;
        position: relative;
    }

    .info-card {
        background: #fff;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px;
    }

    .info-card .logo {
        width: 120px;
        height: 120px;
        float: left;
        margin-right: 16px;
    }

    .cn_name {
        font-weight: 400 !important;
        font-size: 24px;
        display: inline;
        color: #0b1721;
        margin-right: 10px;
    }

    .name {
        font-size: 14px;
        color: #858a90;
        line-height: 30px;
    }

    .desc {
        margin-top: 10px;
        width: 500px;
        font-size: 14px;
        color: #858a90;
    }

</style>
